<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":"
            + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />

    <link rel="stylesheet" type="text/css" href="lib/bootstrap/bootstrap-table.min.css" />
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/bootstrap-theme.min.css" />
    <title>客户列表</title>
</head>
<body>
    <nav class="breadcrumb" style="height: 50px"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 管理员管理 <span class="c-gray en">&gt;</span> 管理员列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
    <div class="page-container" style="padding-top: 5px">
        <div class="cl  mt-20" style="margin-top: 5px" id="toolbar">
            <span class="l">
                <shiro:hasPermission name="customer:deletes">
                    <a href="javascript:;" onclick="customer_dels()" class="btn btn-danger radius">
                        <i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>
                </shiro:hasPermission>
                <shiro:hasPermission name="customer:insert">
                    <a href="javascript:;" onclick="customer_add()" class="btn btn-primary radius">
                        <i class="Hui-iconfont">&#xe600;</i> 添加客户</a></span>
                </shiro:hasPermission>
        </div>
        <table id="customerTable"></table>

    </div>
    <!--_footer 作为公共模版分离出去-->
    <script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.1.11.3.js"></script>
    <script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
    <script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
    <script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

    <!--请在下方写此页面业务相关的脚本-->
    <script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
    <script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>

    <script type="text/javascript" src="lib/bootstrap/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="lib/bootstrap/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#customerTable').bootstrapTable({
                url: 'customer/list',
                responseHandler: function(res) {
                    var data =  {rows: res.list,total: res.total};
                    return data;
                },
                pagination: true,
                toolbar: "#toolbar",
                contentType: 'application/x-www-form-urlencoded',
                search: true,
                pageNumber: 1,
                pageSize: 10,
                //pageList:[10,25,50,100],
                sidePagination: "server",
                paginationHAlign: 'right',
                //showToggle: true,
                //cardView: false,
                showColumns: true,
                showRefresh: true,
                columns: [
                    <shiro:hasPermission name="customer:deletes">
                        { checkbox: true},
                    </shiro:hasPermission>
                    {field: 'customerId',title: '编号'},
                    {field: 'customerName',title: '姓名'},
                    {field: 'phone',title: '联系电话'},
                    {field: 'email',title: '邮箱地址'},
                    {field: 'address',title: '住址'},
                    {field: 'area',title: '地域'},
                    {field: 'idCard',title: '身份证'},
                    {field: 'gender',title: '性别',formatter:genderFormatter},
                    {field: 'remark',title: '描述'},
                    {field: 'salesMan',title: '业务员'},
                    {
                        field:'customerId',
                        title:'操作',
                        align:'center',
                        formatter:operationFormatter

                    }],
                queryParams: function(params) {
                    return {
                        pageNum: params.offset / params.limit + 1,
                        pageSize: params.limit,
                        keyword: params.search
                    };
                },
            })

        });

        function genderFormatter(value) {
            if (value==1){
                return "男";
            }
            return "女";
        }

        function operationFormatter(value,row,index){
            var html ="";
            var flag=false;
            <shiro:hasPermission name="customer:update">
            html ='<a title="编辑" href="javascript:;" onclick="customer_edit('+value+')" style="text-decoration:none"><i class="Hui-iconfont" ></i></a>';
            flag=true;
            </shiro:hasPermission>
            <shiro:hasPermission name="customer:delete">
            html += '<a title="删除" href="javascript:;" onclick="customer_del('+value+')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont" style="color: red"></i></a>';
            flag=true;
            </shiro:hasPermission>
            if (!flag){
                html="无";
            }
            return html;
        }

        function customer_add() {
            layer_show("添加客户","customer/edit");
            $(".layui-layer-max").trigger("click");
            $(".layui-layer-max").hide();
        }

        function customer_edit(id) {
            layer_show("修改客户","customer/edit?customerId="+id);
            $(".layui-layer-max").trigger("click");
            $(".layui-layer-max").hide();
        }

        function customer_dels() {
            var objs=$('#customerTable').bootstrapTable('getSelections');
            if(objs.length==0){
                layer.msg("请选择需要删除的客户后重试",{icon:5,time:1000});
                return;
            }
            var ids=[];
            for (var i = 0; i < objs.length; i++) {
                ids.push(objs[i].customerId);
            }
            layer.confirm("确定要删除选中的客户吗?",{icon:5},function () {
                $.get("customer/deletes",{ids:ids},function (res) {
                    layer.msg(res.msg,{icon:res.code,time:1000},function () {
                        if (1==res.code){
                            refreshTable();
                        }
                    });
                });
            })
        }

        function customer_del(id) {
            layer.confirm("确定要删除吗?",{icon:5},function () {
                $.get("customer/delete?id="+id,function (res) {
                    layer.msg(res.msg,{icon:res.code,time:1000},function () {
                        if (1==res.code){
                            refreshTable();
                        }
                    });
                });
            })
        }

        function refreshTable() {
            $('#customerTable').bootstrapTable('refresh');
        }

    </script>
</body>
</html>